import 'package:flutter/material.dart';
import 'package:flutter_project/config/loading_toast.dart';

import '../common/utils/screen_size_utils.dart';
import '../config/theme_color.dart';
import 'chose_category_list_model.dart';

class ChoseCategoryListPage extends StatefulWidget {
  const ChoseCategoryListPage({super.key});

  @override
  State<ChoseCategoryListPage> createState() => _ChoseCategoryListPageState();
}

class _ChoseCategoryListPageState extends State<ChoseCategoryListPage> {
  double alpha = 0.5;
  List<String> categoryNameList = [
    '家庭',
    '校园',
    '民国',
    '悬疑',
    '都市脑洞',
    '都市日常',
    '剧情',
    '喜剧',
    '武侠仙侠',
    '抗战谍战',
    '逆袭',
    '年代',
    '反转',
    '时空之旅',
    '乡村',
    '青春',
    '高手下山',
    '甜宠',
    '闪婚',
    '先婚后爱',
    '萌宝',
    '王妃',
    '传承觉醒',
    '医神',
    '复活',
    '女婿',
    '富豪',
    '小人物',
    '战王',
    '报仇',
    '虐恋',
    '总裁',
    '现代言情',
    '古装'
  ];
  List<ChoseCategoryListModel> categoryList = [];
  List<ChoseCategoryListModel> choseList = [];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: ScreenSizeUtils.deviceScreenHeight(context) * 0.9,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(8), topRight: Radius.circular(8)),
      ),
      child: Column(
        children: [
          const SizedBox(
            height: 15,
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Container(
                  padding: const EdgeInsets.only(left: 15),
                  child: Icon(
                    Icons.keyboard_arrow_down_outlined,
                    color: ThemeColor.textColor,
                  ),
                ),
              ),
              const Spacer(),
              const Text(
                '选择合集分类',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
              ),
              const Spacer(),
            ],
          ),
          const SizedBox(
            height: 25,
          ),
          Expanded(
            child: GridView.builder(
                padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
                itemCount: categoryList.length,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    mainAxisSpacing: 10,
                    crossAxisSpacing: 10,
                    childAspectRatio: 20 / 6),
                itemBuilder: (BuildContext context, int index) {
                  ChoseCategoryListModel itemModel = categoryList[index];
                  return GestureDetector(
                    onTap: () {
                      if (choseList.length == 3 && itemModel.isChose == false) {
                        toast('最多选择3个分类');
                        return;
                      }
                      itemModel.isChose = !itemModel.isChose;
                      if (itemModel.isChose) {
                        choseList.add(itemModel);
                      } else {
                        choseList.remove(itemModel);
                      }
                      setState(() {});
                    },
                    child: Container(
                      decoration: BoxDecoration(
                          color: itemModel.isChose
                              ? ThemeColor.orangeFF6924Color
                              : ThemeColor.mainBgColor,
                          borderRadius: BorderRadius.circular(4)),
                      alignment: Alignment.center,
                      child: Text(itemModel.name),
                    ),
                  );
                }),
          ),
          Opacity(
            opacity: choseList.isNotEmpty ? 1.0 : 0.5,
            child: Container(
              width: 150,
              alignment: Alignment.center,
              height: 45,
              decoration: BoxDecoration(
                  color: const Color(0xff6f66d6),
                  gradient: LinearGradient(
                      colors: [const Color(0xFFD175FE), ThemeColor.mainColor]),
                  borderRadius: BorderRadius.circular(25)),
              child: const Text(
                '确定',
                style: TextStyle(
                    fontSize: 14,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    categoryList = ChoseCategoryListModel.getAllList(categoryNameList);
  }
}
